<template>
	<view class="order">
		<tui-navigation-bar   :titleSize="18" :titleLineHeight="18" :titlefontWeight="800" :isOpacity="false"
			@init="initNavigation" title="订单" backgroundColor="#fff" color="#000">
		</tui-navigation-bar> 
		 
		<view  class="matter">
			<z-paging
				:empty-view-img-style="{'display':'none'}"
				empty-view-text="呜~您还没有任何订单..." 
				class="paging" 
				ref="paging"  
				@query="queryList"
				v-model="dataList"
			>    
				<template v-slot:top>
					 <view class="header_tab_order"  :style="{ marginTop: marginTp + 'px' }">
						<tutor-nav-tab ref="navTabs" :clickColor="tabColor" :textColor="textColor"   :tabTitle="list" @changeTab="changeTab"></tutor-nav-tab>
					 </view>
				</template>
					<view style="padding-bottom: 80rpx;">
						<OrderDetailsItem :ossUrl="ossUrl" :list="dataList"></OrderDetailsItem> 
					</view>
			</z-paging>
		</view>
	</view>
</template>

<script>
	import OrderDetailsItem from './compontents/orderDetailsItem/orderDetailsItem.vue'
	import { tutorOrderList,tutorOrderEnd,tutorOrderAcess } from '@/http/api/order/order.js'
	export default {
		data() {
			return {
				top: 0, //标题图标距离顶部距离
				marginTp: 0, 
				currentTab: 4, 
				tabColor: '#e45071',
				textColor: '#000', 
				// 状态 0全部，1，邀约中，2已确认，3待开始，4服务中，5待评价 6已完成 7 已关闭 8拒绝
				list: [
					{
						text: '服务中'
					},
					{
						text: '待开始'
					},
					{
						text: '已确认'
					},
					{
						text: '待评价'
					},
					{
						text: '已完成'
					},
					{
						text: '全部订单'
					}
				],
				dataList: [],
			}
		},
		props: {
			//oss
			ossUrl:{
				type: String,
				default:''
			}
		},
		components:{
			OrderDetailsItem
		},  
		mounted() { 
			uni.$on('refreshOrderList',(e)=>{
				if(e){
					this.$refs.paging.reload()
				}
			}) 
		}, 
		destroyed()  {
			uni.$off('refreshOrderList'); // 移除事件监听
		},
		methods: {
			 initNavigation(e) {
			 	this.top = e.top;
			 	this.marginTp = e.height
			 },
			 changeTab(index) { 
				 console.log(index,'数据')
				switch (index) {
					case 0: {
						this.currentTab = 4;
						break;
					}
					case 1: {
						this.currentTab = 3;
						break;
					}
					case 2: {
						this.currentTab = 2;
						break;
					}
					case 3: {
						this.currentTab = 5;
						break;
					}
					case 4: {
						this.currentTab = 6;
						break;
					}
					case 5: {
						this.currentTab = 0;
						break;
					}
					default: {
						this.currentTab = 0;
						break;
					}
				}  
					this.$refs.paging.reload()
			 	},
			 	queryList(pageNo,pageSize) {
			 		uni.showLoading({
			 			title: '加载中...'
			 		});
			 		this.getOrderLists(pageNo,pageSize);
			 	},
				 getOrderLists(pageNo,pageSize) { 
						tutorOrderList({
								status: !this.currentTab ? '':this.currentTab,
								pageSize:pageSize,
								pageNum:pageNo
							}).then(res=>{
								console.log(res)
								if(res.code===200){
									let list=res.rows
									this.$refs.paging.complete(list); 
								} 
							})
							.catch(res => {
								// 如果请求失败写this.$refs.paging.complete(false);
								// 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
								// 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
								this.$refs.paging.complete(false);
							})
							.finally(()=>{
								uni.hideLoading();
						}) 
			 },
			 
			 //结束服务
			 endOrder(){
				 tutorOrderEnd().then(res=>{
					 if(res.code===200){
						 
					 }
				 })
			 }
		}
	}
</script>

<style lang="scss" scoped>
@import './order.scss';
</style>